import React, {Component} from 'react'
import {
  View,
  StyleSheet,
  Text,
  TouchableOpacity,
  Image
} from 'react-native'

export default class extends Component{
  constructor(props) {
    super(props)
  }

  render () {
    let data = this.props.data
    return (
      <TouchableOpacity style={styles.container}>
        <View style={styles.cell_container}>
          <Text style={styles.title}>{data.full_name}</Text>
          <Text style={styles.description}>{data.description}</Text>
          <View style={styles.row}>
            <View style={styles.row}>
              <Text>Author:</Text>
              <Image style={{height:22, width: 22}} source={{uri: data.owner.avatar_url}}/>
            </View>
            <View style={{justifyContent: 'space-between', flexDirection: 'row'}}>
              <Text>Star:</Text>
              <Text>{data.stargazers_count}</Text>
            </View>
            <Image style={{width:22, height: 22}} source={require('../../res/images/ic_star.png')} />
          </View>
        </View>
      </TouchableOpacity>
    )
  }
}

const styles = StyleSheet.create({
  cell_container: {
    backgroundColor: '#fff',
    padding: 10,
    marginHorizontal: 5,
    marginVertical: 3,
    borderColor: '#ddd',
    borderWidth: 0.5,
    borderRadius: 2,
    shadowColor: 'gray',
    shadowOffset: {width:0.5, height: 0.5},
    shadowOpacity: 0.4,
    shadowRadius: 1,
    elevation: 2
  },
  title: {
    fontSize: 16,
    marginBottom: 2,
    color: '#212121',
  },
  description: {
    fontSize: 14,
    marginBottom: 2,
    color: '#757575'
  },
  row: {
    justifyContent: 'space-between',
    alignItems: 'center',
    flexDirection: 'row'
  }
})
